<template>
  <div>
    <div class="name-box" @click="handleNode">{{ dataNode.data.name }}</div>
  </div>

</template>

<script>
import { createTag, createTagTree } from '@/api/tag'
export default {
  props: {
    dataNode: {
      type: Object
    }
  },
  data() {
    return {
      loaded: false,

      visible: false,
      createVisible: false,
      addType: 0,
      node: '',
      treeDetail: {},
      createForm: {
        id: '',
        name: '',
        onShelve: false
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入标签树名称',
            trigger: 'blur'
          }
        ]
      },
      queryData: {
        ids: '',
        pageNo: 1,
        pageSize: 40
      }
    }
  },
  created() {
    console.log('node', this.node)
  },
  methods: {
    handleNode() {
      this.node = this.dataNode
      this.treeDetail = this.dataNode.data
      this.visible = true
    },
    handleAdd(type) {
      this.addType = type
      this.createVisible = true
      this.createForm.id = this.treeDetail.id
    },
    handleDel() {},
    submitAdd() {
      if (this.loaded) return
      this.$refs.createForm.validate((res) => {
        if (res) {
          this.loaded = true
          const loading = this.$loading({
            text: '提交中...'
          })
          let asynFn = ''
          const data = JSON.parse(JSON.stringify(this.createForm))
          console.log('datadatadatadata', data)
          if (this.addType === 1) {
            asynFn = createTagTree
            data.parentId = data.id
            delete data.onShelve
          } else {
            asynFn = createTag
            data.treeId = data.id
          }
          delete data.id
          asynFn(data).then(res => {
            console.log('resresres', res)
            const isSuccess = !isNaN(parseInt(res))
            this.$message({
              type: isSuccess ? 'success' : 'error',
              message: `提交${isSuccess ? '成功' : '失败'}`
            })
            if (isSuccess) {
              this.$parent.rootNode.childNodes = []
              this.loaded = false
              this.loadNode(this.$parent.rootNode, this.$parent.rootResolve)
              this.visible = false
              this.createVisible = false
              this.closeAddModal()
            } else {
              throw new Error('提交失败')
            }
          }).catch(err => {
            this.$message.error({
              message: '提交失败，请重新提交~'
            })
            console.log('error', err)
          }).finally(() => {
            loading.close()
            this.loaded = false
          })
        }
        console.log('提交res', res, this.createForm)
      })
    },
    closeAddModal() {
      this.createForm = {
        id: '',
        name: '',
        onShelve: false
      }
      this.treeDetail = {}
      this.addType = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.name-box{
}
.tag_modal {
  padding-bottom: 20px;
	.tag_line {
		display: flex;
		justify-content: flex-start;
		& + .tag_line {
			margin-top: 10px;
		}
		.tag_item {
			width: 33.333%;
			font-size: 16px;
			span {
				display: inline-block;
				width: 80px;
				text-align: right;
				margin-right: 10px;
				color: #999;
			}
		}
	}
}
::v-deep .el-dialog__body {
	padding-bottom: 10px;
}
</style>
